<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title th:text="${className} + ' 学生名单 - 企业培训平台'">班级学生名单 - 企业培训平台</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <style>
    /* Add some styles as needed */
    .class-info {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
    }
    .class-info p {
      margin-bottom: 5px;
      font-size: 1.1em;
    }

    .students-list table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      background-color: #fff; /* Table background color */
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Table shadow */
      border-radius: 8px; /* Table rounded corners */
      overflow: hidden; /* Hide overflow content, for rounded corners */
    }
    .students-list th, .students-list td {
      border: 1px solid #ddd;
      padding: 12px; /* Adjust padding */
      text-align: left;
    }
    .students-list th {
      background-color: #f2f2f2;
      font-weight: bold;
      color: #333;
    }
    .students-list tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .students-list tr:hover {
      background-color: #e9e9e9;
    }
    .actions-column a, .actions-column button {
      margin-right: 5px;
    }
    .no-students-message {
      text-align: center;
      margin-top: 30px;
      font-size: 1.2em;
      color: #666;
    }
    .actions-bar form { /* Style for the delete form to align buttons */
      display: inline;
    }
  </style>
</head>
<body>
<div th:replace="~{fragments/header :: common-header}"></div>

<div class="main-content">
  <div class="container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <h1 class="page-title" th:text="${className} + ' 学生名单'" style="margin-bottom: 0;">班级学生名单</h1>
      <div class="actions-bar" style="margin-bottom: 0;">
        <a th:href="@{/class/{classId}/courses/add(classId=${classId})}" class="btn btn-info">添加课程</a>
        <a th:href="@{/class/{classId}/students/add(classId=${classId})}" class="btn btn-primary">添加学生</a>
        <a th:href="@{/class/{classId}/courses/manage(classId=${classId})}" class="btn btn-secondary">课程管理</a>
      </div>
    </div>

    <div class="class-info">
      <p>班级名称: <strong th:text="${className}">班级名称占位符</strong></p>
      <p>班级人数: <strong th:text="${studentsCount}">学生人数占位符</strong></p>
      <p>班级课程数: <strong th:text="${coursesCount}">课程数量占位符</strong></p>
    </div>


    <div th:if="${successMessage}" class="alert alert-success">
      <p th:text="${successMessage}"></p>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger">
      <p th:text="${errorMessage}"></p>
    </div>

    <div class="students-list">
      <table th:if="${!#lists.isEmpty(students)}">
        <thead>
        <tr>
          <th>序号</th>
          <th>学生ID</th>
          <th>学生姓名</th>
          <th>学生用户名</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="student, iterStat : ${students}">
          <td th:text="${iterStat.count}">序号占位符</td> <td th:text="${student.id}">学生ID占位符</td>
          <td th:text="${student.stuName}">学生姓名占位符</td>
          <td>学生用户名占位符</td>
          <td class="actions-column">
            <form th:action="@{/class/{classId}/students/delete/{studentId}(classId=${classId}, studentId=${student.id})}" method="post" style="display: inline;">
              <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要从班级中删除这个学生吗？');">删除</button>
            </form>
          </td>
        </tr>
        </tbody>
      </table>

      <div th:if="${#lists.isEmpty(students)}" class="no-students-message">
        <p>该班级暂无学生。</p>
      </div>
    </div> <div style="margin-top: 20px;">
    <a th:href="@{/class/manage}" class="btn btn-secondary">返回班级列表</a>
  </div>

  </div> </div> </body>
</html>
